<template>
  <div ref="discounts" class="discounts" />
</template>

<script>
import * as echarts from 'echarts/core'
import {
  LineChart
} from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  GridComponent
} from 'echarts/components'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {
  CanvasRenderer
} from 'echarts/renderers'

// 注册必须的组件
echarts.use(
  [TitleComponent, TooltipComponent, GridComponent, LineChart, CanvasRenderer]
)
export default {
  name: 'Discounts',
  mounted() {
    var myChart = echarts.init(this.$refs.discounts)
    myChart.setOption({
      color: ['#1890ff', '#2fc25b'],
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['平台优惠券', '商铺优惠券']
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00']
      },
      yAxis: {
        type: 'value',
        min: 500,
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        }
      },
      series: [
        {
          name: '平台优惠券',
          type: 'line',
          data: [1500, 3100, 3100, 1800, 1100, 3900, 3600]
        },
        {
          name: '商家优惠券',
          type: 'line',
          data: [1900, 800, 2900, 2300, 2800, 4300, 2100]
        }
      ]
    })
  }
}
</script>

<style lang="scss" scoped>
.discounts {
  height: 100%;
  width: 100%;
}
</style>
